<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="../../vue.js"></script>
	<title>Document</title>
</head>

<body>
	<div id="app">
		<h2>当前的n值为:{{n}}</h2>
		<button @click="add">点击n+1</button>
		<button @click="updated">点击销毁</button>
	</div>
</body>
<script>
	const vm = new Vue({
		data: {
			n: 1
		},
		methods: {
			add() {
				this.n++
			},
			updated() {
				this.$destroy()
			}
		},
		beforeCreate() {
			console.log('初始化前-beforCreate');
		},
		created() {
			console.log('初始化后-created');
		},
		beforeMount() {
			console.log('挂载前-beforMount');
		},
		mounted() {
			console.log('挂载后-mounted');
		},
		beforeUpdate() {
			console.log('更新前-beforeUpdate');
		},
		updated() {
			console.log('更新后-updated');
		},
		beforeDestroy() {
			console.log('销毁前-beforeDestory');
		},
		destroyed() {
			console.log('销毁后-destroyed');
		}
	}).$mount('#app')
</script>

</html>